layui.define(['jquery', 'element','permission'], function (exports) {
	"use strict";

	var $ = layui.jquery;
	var element = layui.element;
	var permission = layui.permission;

	var nav=[]; //导航目录
	
	var page = function (opt) {
		this.option = opt;
	};

	/**
	 * @since Pear Admin 4.0
	 * 
	 * 创建 Page 页面
	 */
	page.prototype.render = function (opt) {
		var option = {
			elem: opt.elem,
			url: opt.url,
			width: opt.width || "100%",
			height: opt.height || "100%",
			title: opt.title
		}
		renderContent(option);
		return new page(option);
	}

	/**
	 * @since Pear Admin 4.0
	 * 
	 * 切换 Page 页面 
	 */
	page.prototype.changePage = function (options) {
		nav=[];
		var menu = $(`#sideMenu .layui-nav-item`).has(`a[menu-url='${options.url}']`);
		if(menu.length > 0){
			var cata = menu.children("a");
			nav.push({title:cata.text(),url:cata.attr("menu-url")})
		}
		biuldBread(options);
		this.loadContent(options);
	}
	
	/**
	 * 
	 * 访问 Page 页面 
	 */
	page.prototype.toPage = function (options) {
		
		biuldBread(options);
		this.loadContent(options);
	}
	
	/**
	 * @since Pear Admin 4.0
	 * 
	 * 访问 Page 页面 
	 */
	page.prototype.startPage = function (options) {
		nav=[];
		biuldBread(options);
		this.loadContent(options);
	}


	page.prototype.refresh = function (loading) {

		var $frameLoad = $(`#${this.option.elem} .pear-page-loading`);
		var $frame = $(`#${this.option.elem} .pear-page-content`);

		if (loading) {
			$frameLoad.css({
				display: 'block'
			});
		}

		if ($frame.attr("type") === "_iframe") {

			$frame.html(`<iframe src='${$frame.attr("url")}' scrolling='auto' frameborder='0' allowfullscreen='true'></iframe>`);

			const $contentFrame = $frame.find("iframe");

			$contentFrame.on("load", () => {
				$frameLoad.fadeOut(1000);
			})

		} else {
			$.ajax({
				type: 'get',
				url: $frame.attr("url"),
				dataType: 'html',
				success: function (data) {
					$frame.html(data)
					$frameLoad.fadeOut(1000);
					element.init();
					permission.validPerm();
				},
				error: function (xhr) {
					return layer.msg('Status:' + xhr.status + '，' + xhr.statusText + '，请稍后再试！');
				}
			});
		}
	}
	
	
	
		/**
	 * @since Pear Admin 4.0
	 * 
	 * 点击面包屑导航 
	 */
	page.prototype.navClick = function() { 
		var _this = this;
		const $nav = $(`#navbread`);
		$("body").on("click", "#navbread a[data-url]",function(){
			var url = $(this).data('url');
			var index = -1;
			for(var i=0;i<nav.length;i++){
					if(nav[i].url == url){
						index = i;
						break;
					}	
			}
			var options = nav[index];
			biuldBread(options);
			element.render('breadcrumb',$nav.attr("lay-filter"));
			_this.loadContent(options);
		})
	}
	
	page.prototype.loadContent = function(options){
		const $frame = $(`#${this.option.elem} .pear-page-content`);

		if (options.type === "_iframe") {
		
			$frame.html(`<iframe src='${options.url}' scrolling='auto' frameborder='0' allowfullscreen='true'></iframe>`);
		
		} else {
			$.ajax({
				url: options.url,
				type: 'get',
				dataType: 'html',
				success: function (data) {
					$frame.html(data);
					permission.validPerm();
				},
				error: function (xhr) {
					return layer.msg('Status:' + xhr.status + '，' + xhr.statusText + '，请稍后再试！');
				}
			});
		}
		$frame.attr("type", options.type);
		$frame.attr("url", options.url);
	}

	function renderContent(option) {
		var menu = $(`#sideMenu .layui-nav-item`).has(`a[menu-url='${option.url}']`);
		if(menu.length > 0){
			var cata = menu.children("a")[0].text;
			nav.push({title:cata,url:option.url})
		}
		biuldBread(option);
		$("#" + option.elem).html(`
			<div class='pear-page'>
				<div class='pear-page-content' type='${option.type}' url='${option.url}'></div>
				<div class="pear-page-loading">
					<div class="ball-loader">
						<span></span>
						<span></span>
						<span></span>
						<span></span>
					</div>
				</div>
			</div>`);

		var $frame = $("#" + option.elem).find(".pear-page-content");

		if (option.type === "_iframe") {

			$frame.html(`<iframe src='${option.url}' scrolling='auto' frameborder='0' allowfullscreen='true'></iframe>`);
		} else {
			$.ajax({
				url: option.url,
				type: 'get',
				dataType: 'html',
				success: function (data) {
					$frame.html(data);
					permission.validPerm();
				},
				error: function (xhr) {
					return layer.msg('Status:' + xhr.status + '，' + xhr.statusText + '，请稍后再试！');
				}
			});
		}
	}
	
	/**
	 * 
	 * 构建面包屑导航 
	 */
	function biuldBread(options) {;
		const $nav = $(`#navbread`);
		var index = -1;
		for(var i=0;i<nav.length;i++){
					if(nav[i].url == options.url){
						index = i;
						break;
					}	
		}
		if(index == -1){
			nav.push(options);
		}else{
			nav.splice(index+1,nav.length);
		}
		
		var html = ``;
		for(var i=0;i<nav.length;i++){
			var item = nav[i];
			if(item.url != undefined){
				html +=`<a href="javascript:void(0);" data-url='${item.url}'>${item.title}</a>`;
			}else{
				html +=`<a href="javascript:void(0);" style="cursor: text;">${item.title}</a>`;
			}
			
		}
		$nav.html(html);
		element.render('breadcrumb',$nav.attr("lay-filter"));		
	}
	

	exports('page', new page());
});
